<template>
  <div class="cusAdd">
    <van-nav-bar
        :title="isDetail ? '详情' : getTitle"
        left-arrow
        left-text="返回"
        @click-left="back"/>
    <div class="wrapper">
      <van-form label-width="120" validate-first @failed="onFailed" @submit="onSubmit" style="width: 95%;">
        <div class="InfoCard">
          <van-field
              disabled
              name="fbillno"
              v-model="formObj.fbillno"
              label="商机编号"
          />
          <van-field
              :disabled="isFollow || isDetail"
              name="fname"
              v-model="formObj.fname"
              label="商机名称"
              :rules="[{ required: true, trigger: 'onSubmit', message: '请输入商机名称' }]"
          >
          </van-field>
          <van-field
              :disabled="isFollow || isDetail"
              readonly
              clickable
              v-model="formObj.fbusinessidName"
              name="fbusinessidName"
              label="商机阶段"
              :rules="[{ required: true, trigger: 'onSubmit', message: '请选择商机阶段' }]"
              @click="choosedSj()"
          />
          <van-field
              :disabled="isFollow || isDetail"
              readonly
              clickable
              v-model="formObj.fcustomer"
              name="fcustomer"
              label="客户"
              placeholder="请输入客户"
              @click="choosedKh()"
          />
          <van-field
              :disabled="isFollow || isDetail"
              name="fendcustomer"
              v-model="formObj.fendcustomer"
              label="最终用户"
              placeholder="请输入最终用户"
          />
          <van-field
              :disabled="isFollow || isDetail"
              name="fcategory"
              v-model="formObj.fcategory"
              label="参数类别"
              placeholder="请选择参数类别"

          />
<!--          v-model="formObj.fcategoryName"-->
<!--          readonly-->
<!--          clickable-->
<!--          @click="chooseFun('关注产品参数类别', columnsParams, 1)"-->
          <van-field
              :disabled="isFollow || isDetail"
              readonly
              clickable
              v-model="formObj.fexpectedDate"
              name="fexpectedDate"
              label="预计成交日期"
              placeholder="请选择预计成交日期"
              @click="chooseExpDate()"
          />
          <van-field
              :disabled="isFollow || isDetail"
              name="fexpectedAmount"
              v-model="formObj.fexpectedAmount"
              type="number"
              label="预计成交金额"
              placeholder="请输入预计成交金额"
          />
          <van-field
              :disabled="isFollow || isDetail"
              rows="2"
              autosize
              type="textarea"
              name="fdescription"
              v-model="formObj.fdescription"
              label="描述"
              placeholder="请输入描述"
          />
          <van-field
              name="fattachment"
              label="附件"
          >
            <template #input>
              <van-uploader :disabled="isFollow || isDetail" accept="image/*,.pdf,.doc,.xls" :after-read="uploadAfter" :preview-image="false">
                <van-button icon="plus" type="info">上传文件</van-button>
              </van-uploader>
            </template>
          </van-field>
          <div class="uploadWrapper">
            <div class="uploadItem" v-for="(upload, index) in formObj.fattachment" :key="index" @click="handlePreview(upload)">{{ upload.filepath }}</div>
          </div>
          <van-field
              :disabled="isFollow || isDetail"
              v-model="formObj.fcurrency"
              readonly
              clickable
              @click="chooseFun('币别', columnsFcurrencyids, 7)"
              name="fcurrency"
              label="币别"
              placeholder="请选择币别"

          />
          <van-field
              :disabled="isFollow || isDetail"
              v-model="formObj.fseriesName"
              readonly
              clickable
              @click="chooseFun('系列', columnsFseriess, 8)"
              name="fseriesName"
              label="系列"
              placeholder="请选择系列"

          />
          <van-field
              name="fresource"
              label="资源"
              placeholder="请选择资源"
          >
            <template #input>
              <van-checkbox-group :disabled="isFollow || isDetail" v-model="formObj.fresource">
                <van-checkbox v-for="col in columnsFresources" :key="col.code" :name="col.code" shape="square">{{ col.text }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field
              :disabled="isFollow || isDetail"
              v-model="formObj.fequipment"
              name="fequipment"
              label="老设备使用情况"
              placeholder="请输入老设备使用情况"
              rows="2"
              autosize
              type="textarea"
          />
        </div>
        <van-notice-bar class="margin-top-10" color="#ff0000" background="#ecf9ff" left-icon="info-o">
          想删除行数据请右滑，将出现删除按钮
        </van-notice-bar>
        <div class="InfoCard">
          <div class="ClumnBar">
            <van-tag mark type="primary" size="large">联系人信息</van-tag>
            <van-icon name="add" size="25" color="#1989fa" @click="handleAddContract" />
          </div>
          <div v-for="(contract, idx) in ywOpportunityContactList" :key="idx">
            <div class="ClumnBar">
              <van-tag mark type="primary" round color="#1989fa">{{ idx + 1 }}</van-tag>
            </div>
            <van-swipe-cell>
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fusername"
                  label="姓名"
                  placeholder="请输入姓名"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fphone"
                  label="手机"
                  placeholder="请输入手机"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fwechat"
                  label="微信"
                  placeholder="请输入微信"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.femail"
                  label="邮件"
                  placeholder="请输入邮件"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.faddress"
                  label="地址"
                  placeholder="请输入地址"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fposition"
                  label="职务"
                  placeholder="请输入职务"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fnote"
                  rows="2"
                  autosize
                  label="备注"
                  type="textarea"
                  placeholder="请输入备注"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.froleName"
                  label="角色"
                  placeholder="请选择角色"
                  readonly
                  clickable
                  @click="chooseFun('角色', columnsRoles, 2, idx)"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fstandpointName"
                  label="立场"
                  placeholder="请选择立场"
                  readonly
                  clickable
                  @click="chooseFun('立场', columnsStandpoints, 3, idx)"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.fcontactStateName"
                  label="接触状态"
                  placeholder="请选择接触状态"
                  readonly
                  clickable
                  @click="chooseFun('接触状态', columnsContactStates, 4, idx)"
              />
              <van-field
                  :disabled="isFollow || isDetail"
                  v-model="contract.frelationshipName"
                  label="客情关系"
                  placeholder="请选择客情关系"
                  readonly
                  clickable
                  @click="chooseFun('接触状态', columnsRelationships, 5, idx)"
              />
              <template #right>
                <van-button :disabled="isFollow || isDetail" square text="删除" type="danger" class="delete-button" @click="handleDeleteContract(idx)"/>
              </template>
            </van-swipe-cell>
            <van-divider v-if="idx != ywOpportunityContactList.length - 1" :style="{ backgroundColor: '#efefef', height: '2px', margin: '8px 0' }" />
          </div>
        </div>
        <div class="InfoCard">
          <div class="ClumnBar">
            <van-tag mark type="primary" size="large">跟进记录</van-tag>
            <van-icon name="add" size="25" color="#1989fa" @click="handleAddFollow()" />
          </div>
          <div v-for="(Person, idx) in ywOpportunityRecordList" :key="idx">
            <div class="ClumnBar">
              <van-tag mark type="primary" round color="#1989fa">{{ idx + 1 }}</van-tag>
            </div>
            <van-swipe-cell>
              <van-field
                  :disabled="!isFollow || isDetail"
                  v-model="Person.createBy"
                  name="createBy"
                  label="跟进人"
              />
              <van-field
                  :disabled="!isFollow || isDetail"
                  clickable
                  readonly
                  name="ftime"
                  v-model="Person.ftime"
                  label="跟进日期"
                  @click="chooseFollowDate(idx)"
              />
              <van-field
                  :disabled="!isFollow || isDetail"
                  clickable
                  readonly
                  v-model="Person.fnodeidName"
                  name="fnodeid"
                  label="跟进阶段"
                  @click="chooseNode(idx)"
              />
              <van-field
                  :disabled="!isFollow || isDetail"
                  rows="2"
                  autosize
                  type="textarea"
                  name="fnote"
                  v-model="Person.fnote"
                  label="跟进内容"
              />
              <van-field
                  :disabled="!isFollow || isDetail"
                  clickable
                  readonly
                  v-model="Person.iscompletedName"
                  name="iscompleted"
                  label="是否完成"
                  @click="chooseFun('是否完成', columnsIscompleted, 6, idx)"
              />
              <van-field
                  name="fattachment"
                  label="附件"
              >
                <template #input>
                  <van-uploader :disabled="!isFollow || isDetail" accept="image/*,.pdf,.doc,.xls" :after-read="(file) => uploadAfterFollow(file, idx)" :preview-image="false">
                    <van-button icon="plus" type="info">上传文件</van-button>
                  </van-uploader>
                </template>
              </van-field>
              <div class="uploadWrapper">
                <div class="uploadItem" v-for="(upload, index) in Person.fattachment" :key="index" @click="handlePreview(upload)">{{ upload.filepath }}</div>
              </div>
              <template #right>
                <van-button :disabled="!isFollow || isDetail" square text="删除" type="danger" class="delete-button" @click="handleDeleteFollow(idx)"/>
              </template>
            </van-swipe-cell>
            <van-divider v-if="idx != ywOpportunityRecordList.length - 1" :style="{ backgroundColor: '#efefef', height: '2px', margin: '8px 0' }" />
          </div>
        </div>
        <div style="margin: 16px;" v-show="!isDetail">
          <van-button :loading="loading" block type="info" native-type="submit">{{ ifNewAdd ? '提交' : '保存'}}</van-button>
        </div>
      </van-form>

      <!-- 选择弹框 -->
      <van-popup v-model="showPickerDate" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="预计成交日期"
          @confirm = "changeDate"
          @cancel="showPickerDate = false"
        />
      </van-popup>
      <!--数据字典选择-->
      <van-popup v-model="showPickerFun" position="bottom">
        <van-picker
            :title="choosetitle"
            show-toolbar
            :columns="columnsFun"
            @confirm="changeFun"
            @cancel="showPickerFun = false"
        />
      </van-popup>
      <!-- 跟进日期选择弹框 -->
      <van-popup v-model="showFollowPickerDate" position="bottom">
        <van-datetime-picker
            v-model="currentFollowDate"
            type="date"
            title="跟进日期"
            @confirm = "changeFollowDate"
            @cancel="showFollowPickerDate = false"
        />
      </van-popup>
      <!--跟进阶段选择-->
      <van-popup v-model="showPickerNode" position="bottom">
        <van-picker
            title="跟进阶段"
            show-toolbar
            value-key="fname"
            :columns="nodeList"
            @confirm="changeNode"
            @cancel="showPickerNode = false"
        />
      </van-popup>
    </div>
    <!--选择商机阶段方案-->
    <choosed-sjjd ref="choosedSjjd" @ok="backSjjd"></choosed-sjjd>
    <choosed-sjkh ref="choosedSjkh" @ok="backSjkh"></choosed-sjkh>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatToString } from '@/utils/utils'
import { opportunityAdd, opportunityEdit, getDicts, serOpportunityContact, opportunityDetail, uploadFile, sernodeList, serOpportunityRecord, addOpportunityRecord } from '@/api/api'
import { Notify } from 'vant'
import ChoosedSjjd from "./choosedSjjd";
import ChoosedSjkh from "./choosedSjkh";

export default {
  name: 'sjAdd',
  components: {
    ChoosedSjkh,
    ChoosedSjjd
  },
  data () {
    return {
      curId: '',//记录数组当前id
      ftype: '',//记录下拉数据类型
      choosetitle: '',
      isDisabled: true,
      loading: false,
      ifNewAdd: true, // 新增还是编辑
      id: null, // 若是编辑记录id
      fbusinessid: null, //客户id
      showPickerDate: false,
      showPickerFun: false,
      formObj: {
        fbillno: '',
        fname: '',
        fcustomer: '',
        fendcustomer: '',
        fcategory: '',
        fcategoryName: '',
        fexpectedDate: '',
        fexpectedAmount: '',
        fdescription: '',
        fattachment: [],
        fcustomerid: '',
        fbusinessid: '',
        fbusinessidName: '',
        fcurrency: 'RMB',
        fcurrencyid: '1',
        fseriesName: '',
        fseries: '',
        fresource: [],
      },
      currentDate: new Date(),
      showFollowPickerDate: false,
      showPickerNode: false,
      currentFollowDate: new Date(),
      columnsFun: [],
      columnsParams: [],
      columnsRoles: [],
      columnsStandpoints: [],
      columnsContactStates: [],
      columnsRelationships: [],
      columnsFseriess: [],
      columnsFcurrencyids: [],
      columnsFresources: [],
      columnsIscompleted: [{text: 'Y', code: '1'}, {text: 'N', code: '0'}],
      ywOpportunityContactList: [],//联系人数据
      ywOpportunityRecordList: [],//跟进记录
      fromPersonData: [],
      nodeList: [],
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId,
      realname: state => state.user.realname,
      access_token: state => state.app.access_token,
      ticket: state => state.app.ticket,
      appId: state => state.user.appId
    }),
    isFollow: function () {
      return this.$route.params.isFollow ? true : false
    },
    isDetail: function () {
      return this.$route.params.isDetail ? true : false
    },
    getTitle: function () {
      return this.isFollow ? '跟进' : this.ifNewAdd ? '新增' : '编辑'
    }
  },
  watch:{
  },
  created () {
    this.ifNewAdd =  this.$route.params.isAdd
    this.id = this.$route.params.id
    this.fbusinessid = this.$route.params.fbusinessid
    if(!this.ifNewAdd) {
      this.getInfo()
      this.getNodeList()
    }
    getDicts('fcategory').then(res => {
      if(res.success) {
        this.columnsParams = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('frole').then(res => {
      if(res.success) {
        this.columnsRoles = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('fstandpoint').then(res => {
      if(res.success) {
        this.columnsStandpoints = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('fcontactState').then(res => {
      if(res.success) {
        this.columnsContactStates = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('frelationship').then(res => {
      if(res.success) {
        this.columnsRelationships = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('sjseries').then(res => {
      if(res.success) {
        this.columnsFseriess = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('fcurrencyid').then(res => {
      if(res.success) {
        this.columnsFcurrencyids = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('fresource').then(res => {
      if(res.success) {
        this.columnsFresources = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
  },
  methods: {
    getInfo () {
      opportunityDetail({ id: this.id }).then(res => {
        if (res.success) {
          let obj = res.result, fattachment = [], fresource = [];
          (obj.fattachment || '').split(',').map(item => {
            fattachment.push({
              filepath: item
            })
          })
          fresource = (obj.fresource || '').split(',')
          this.formObj = Object.assign({}, {...obj, fattachment, fresource})
        }
      })
      serOpportunityContact({ id: this.id }).then(res => {
        if (res.success) {
          this.ywOpportunityContactList = res.result
        }
      })
      serOpportunityRecord({ id: this.id }).then(res => {
        if (res.success) {
          this.ywOpportunityRecordList = res.result.map(item => {
            let fattachment = [];
            (item.fattachment || '').split(',').map(item => {
              fattachment.push({
                filepath: item
              })
            })
            item.fattachment = fattachment
            item.iscompletedName = this.columnsIscompleted.filter(f => f.code == item.iscompleted)[0].text
            return item
          })
        }
      })
    },
    getNodeList () {
      sernodeList({
        id: this.id,
        fbusinessid: this.fbusinessid
      }).then(res => {
        if(res.success) {
          this.nodeList = res.result.map(item => {
            item.disabled = item.fcolor != 2
            return item
          })
        }
      })
    },
    choosedSj () {
      this.$refs.choosedSjjd.show()
    },
    backSjjd (info) {
      console.log(info)
      let result = info.result
      this.formObj.fbusinessid = result.id
      this.formObj.fbusinessidName = result.fname
    },
    choosedKh () {
      this.$refs.choosedSjkh.show()
    },
    backSjkh (info) {
      console.log(info)
      let result = info.result
      this.formObj.fcustomerid = result.id
      this.formObj.fcustomer = result.fname
    },
    uploadAfter (file) {
      let formData = new FormData()
      formData.append('file', file.file);
      formData.append('bizPath', "crm");
      uploadFile(formData).then(res => {
        if (res.success) {
          this.formObj.fattachment.push({
            filepath: res.message
          })
          Notify({ type: 'success', message: '上传成功', duration: 4000 })
        }else {
          Notify({ type: 'danger', message: res.result, duration: 4000 })
        }
      })
    },
    uploadAfterFollow (file, idx) {
      this.curId = idx
      let formData = new FormData()
      formData.append('file', file.file);
      formData.append('bizPath', "crm");
      uploadFile(formData).then(res => {
        if (res.success) {
          this.ywOpportunityRecordList[this.curId].fattachment.push({
            filepath: res.message
          })
          Notify({ type: 'success', message: '上传成功', duration: 4000 })
        }else {
          Notify({ type: 'danger', message: res.result, duration: 4000 })
        }
      })
    },
    handlePreview (record) {
      let url = 'http://124.221.130.190:8081/hwerJK/sys/common/static/' + record.filepath
      window.open(url)
    },
    chooseExpDate () {
      this.showPickerDate = true
    },
    changeDate () {
      this.formObj.fexpectedDate = formatToString(this.currentDate, 'Simple', '-')
      this.showPickerDate = false
    },
    chooseFun (title, columns, ftype, curId) {
      this.showPickerFun = true
      this.ftype = ftype
      this.curId = curId
      this.choosetitle = title
      this.columnsFun = columns
    },
    changeFun (value, index) {
      console.log(value, index)
      switch (this.ftype) {
        case 1:
          this.formObj.fcategoryName = value.text
          this.formObj.fcategory = value.code
          break;
        case 2:
          this.ywOpportunityContactList[this.curId].frole = value.code
          this.ywOpportunityContactList[this.curId].froleName = value.text
          break;
        case 3:
          this.ywOpportunityContactList[this.curId].fstandpoint = value.code
          this.ywOpportunityContactList[this.curId].fstandpointName = value.text
          break;
        case 4:
          this.ywOpportunityContactList[this.curId].fcontactState = value.code
          this.ywOpportunityContactList[this.curId].fcontactStateName = value.text
          break;
        case 5:
          this.ywOpportunityContactList[this.curId].frelationship = value.code
          this.ywOpportunityContactList[this.curId].frelationshipName = value.text
          break;
        case 6:
          this.ywOpportunityRecordList[this.curId].iscompleted = value.code
          this.ywOpportunityRecordList[this.curId].iscompletedName = value.text
          break;
        case 7:
          this.formObj.fcurrencyid = value.code
          this.formObj.fcurrency = value.text
          break;
        case 8:
          this.formObj.fseries = value.code
          this.formObj.fseriesName = value.text
          break;
      }
      this.showPickerFun = false
    },
    chooseFollowDate (idx) {
      this.showFollowPickerDate = true
      this.curId = idx
    },
    changeFollowDate () {
      this.ywOpportunityRecordList[this.curId].ftime = formatToString(this.currentFollowDate, 'Simple', '-')
      this.showFollowPickerDate = false
    },
    chooseNode (idx) {
      this.showPickerNode = true
      this.curId = idx
    },
    changeNode (val) {
      this.ywOpportunityRecordList[this.curId].fnodeid = val.id
      this.ywOpportunityRecordList[this.curId].fnodeidName = val.fname
      this.showPickerNode = false
    },
    handleAddContract () {
      const newData = {
        fusername: '',
        fphone: '',
        fwechat: '',
        femail: '',
        faddress: '',
        fposition: '',
        fnote: '',
        frole: '',
        froleName: '',
        fstandpoint: '',
        fstandpointName: '',
        fcontactState: '',
        fcontactStateName: '',
        frelationship: '',
        frelationshipName: '',
      };
      this.ywOpportunityContactList.push(newData)
    },
    handleDeleteContract (index) {
      this.ywOpportunityContactList.splice(index, 1)
    },
    handleAddFollow () {
      const newData = {
        createBy: this.realname,
        ftime: '',
        fnodeid: this.$route.params.fnewnodeid,
        fnodeidName: this.$route.params.fnewjd,
        fnote: '',
        iscompleted: '',
        iscompletedName: '',
        fattachment: [],
      };
      this.ywOpportunityRecordList.push(newData)
    },
    handleDeleteFollow (index) {
      this.ywOpportunityRecordList.splice(index, 1)
    },
    onFailed () { // values, errors
      Notify({ type: 'warning', message: '请将信息填写完整!', duration: 4000 })
    },
    async onSubmit () {
      let hasEmpty = false
      let hasComplate = false
      // 联系人需要校验必填项
      this.ywOpportunityContactList.map(item => {
        if ((!item.fphone && !item.fwechat) || !item.fposition) hasEmpty = true
      })
      // 跟进需要校验必填项
      this.ywOpportunityRecordList.map(item => {
        if ( !item.iscompletedName) hasComplate = true
      })
      if (hasEmpty && !this.isFollow) {
        Notify({ type: 'warning', message: '职务必填，手机和微信填写其中一个!', duration: 4000 })
        return false
      }
      if (hasComplate && this.isFollow) {
        Notify({ type: 'warning', message: '是否完成需必选！!', duration: 4000 })
        return false
      }
      this.loading = true

      if (this.isFollow) {
        let followParams = {
          id: this.formObj.id,
          ywOpportunityRecordList: this.ywOpportunityRecordList.map(item => {
            item.fattachment = item.fattachment.length ? item.fattachment.map( item => item.filepath).join() : ''
            delete item.createTime
            return item
          })
        }
        addOpportunityRecord(followParams).then( res => {
          if (res.success) {
            Notify({ type: 'success', message: '商机跟进记录新增成功!', duration: 4000 })
            this.back()
            this.loading = false
          }else {
            Notify({ type: 'danger', message: res.result, duration: 4000 })
            this.loading = false
          }
        })
      }else {
        let params = {
          ...this.formObj,
          fattachment: this.formObj.fattachment.length ? this.formObj.fattachment.map( item => item.filepath).join() : '',
          fresource: this.formObj.fresource.length ? this.formObj.fresource.join() : '',
          ywOpportunityContactList: this.ywOpportunityContactList
        }
        if (this.ifNewAdd) {
          opportunityAdd(params).then( res => {
            if (res.success) {
              Notify({ type: 'success', message: '商机信息新增成功!', duration: 4000 })
              this.back()
              this.loading = false
            }else {
              Notify({ type: 'danger', message: res.result, duration: 4000 })
              this.loading = false
            }
          })
        } else {
          delete params.createTime
          opportunityEdit(params).then(res => {
            if (res.success) {
              Notify({ type: 'success', message: '商机信息修改成功!', duration: 4000 })
              this.back()
              this.loading = false
            }
          })
        }
      }

    },
    back () {
      this.$router.push({name: 'sjInfoList'})
    }
  }
}
</script>
<style scoped>
.wrapper{
  background: #efefef;
  display: flex;
  justify-content: center;
}
.ContactOption{
  margin-bottom: 5px;
}
.ClumnBar{
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.delete-button {
  height: 100% !important;
}
.uploadWrapper {
  display: flex;
  flex-direction: column;
  color: #1989fa;
  font-size: 14px;
  margin-bottom: 2px;
}
.uploadItem {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

